<template>
	<view class="host">
		<view class="bg-img padding-bottom-xl margin-left margin-right bgimg" style="background-image: url('../../static/images/pic48.png');height: 415upx;">
			<view class="bg-shadeTop padding padding-bottom-xl fonthost">
				商城
			</view>
			<view class="img1">
				<image src="../../static/images/pic33.png" mode="" class="img1-1"></image>
				<image src="../../static/images/pic35.png" mode="" class="img1-2"></image>
				<image src="../../static/images/pic37.png" mode="" class="img1-3"></image>
				<view class="title1">59平米住下4口人</view>
				<view class="title2">- 解决小户型买家具问题 -</view>
			</view>
		</view>
		<view class="cu-bar search margin border-radus">			
				<text class="cuIcon-search"></text>
				<input class="inp" @focus="InputFocus" @blur="InputBlur" :adjust-position="false" type="text" placeholder="大家都在搜:沙发" confirm-type="search">		
		</view>
		<view class="my-grid flex justify-around padding-tb-sm bg-fff">
			<view class="flex flex-direction align-center" v-for="(item,index) in Building" :key="index">
				<image :src="item.imgurl" mode=""></image>
				<text>{{item.name}}</text>
			</view>
		</view>
		<view class="Advertisement">
			<image src="../../static/images/pic4.png" mode=""></image>
		</view>
		<view>
			<good-list :list1="list"></good-list>
		</view>
		<view class="line1"></view>
		<view class="rsbox">
			<text class="RushBuy margin-left">超值抢购</text>
			<view class="time">
				<text>08</text>:
				<text>04</text>:
				<text>34</text>
			</view>
			<good-list :list1="list"></good-list>
		</view>
		<view class="line1"></view>
		<view>
			<view class="text-center margin-bottom">
				<image src="../../static/images/pic59.png" mode="" style="width: 43upx; height: 42upx; position: relative;top: 5upx;"></image>
				<text class="like">猜你喜欢</text>
			</view>
			<ListGood :list2="list"></ListGood>
		</view>
	</view>
</template>

<script>
	import GoodList from "../../components/GoodList/index.vue"
	import ListGood from "../../components/GoodList/listgood.vue"
	export default {
		components:{
			GoodList,
			ListGood
		},
		data() {
			return {
				list:[],
				Building:[
					{
					imgurl:'../../static/images/pic24.png',
					name:"家具"
					},
					{
						imgurl:'../../static/images/pic26.png',
						name:"建材"
					},
					{
						imgurl:'../../static/images/pic20.png',
						name:"装饰"
					},
					{
						imgurl:'../../static/images/pic23.png',
						name:"布艺"
					},
					{
						imgurl:'../../static/images/pic6.png',
						name:"全部分类"
					},
				]
			}
		},
		methods: {
			
		},
		onLoad(){
			uni.request({
				url:"http://rap2api.taobao.org/app/mock/239452/get/list",
			    method:'get',
			    success: (res) => {
					
			        if(res.data.code==1){
						this.list=res.data.data
						console.log(this.list)
					}
					
			    }
			});
		}
	}
</script>

<style lang="scss">
.host{
	.bgimg{
		height: 415upx;
		.fonthost{
			width:191upx;
			height:43upx;
			font-size:52upx;
			font-weight:400;
			color:#24262D;
			line-height:48upx;
		}
	}
	
	.img1{
		width: 471upx;
		height: 144upx;
		position: relative;
		left:123upx;
		top: 199upx;
		
		>.img1-1{
			width: 100%;
			height: 100%;
			position: absolute;
			top: -100upx;
			z-index: 2;
		}
		>.img1-2{
			position: absolute;
			top: -100upx;
			left: 4upx;
			width: 18upx;
			height: 143upx;
			z-index: 3;
		}
		
		>.img1-3{
			height: 22upx;
			position: absolute;
			top: -105upx;
			left: 0px;
			z-index: 4;
		}
		.title1{
			position: absolute;
			top: -40px;
			left: 50upx;
			z-index: 15;
			font-weight:600;
			font-size: 50upx;
		}
		.title2{
			position: absolute;
			top: -10px;
			left: 50upx;
			z-index: 15;
			// font-weight:600;
			font-size: 32upx;
			color: #8E96A4;
		}
	}
	.cu-bar{
		background:rgba(0,0,0,0.1);
		border-radius: 15upx;
		}
	.cuIcon-search{
		padding-left: 36%;
	}
	.my-grid{
		image{
			width: 60upx;
			height: 70upx;
		}
	}
	.Advertisement{
		margin-top: 20upx;
		margin-bottom: 39upx;
		width: 750upx;
		height: 150upx;
		image{
			width: 100%;
			height: 100%;		
			transform:rotate(-0.8deg);
		}
	}
	
	.rsbox{
		position: relative;
		.RushBuy{
			
			width:140upx;
			height:33upx;
			font-size:40upx;
			font-family:59;
			font-weight:400;
			color:rgba(41,44,51,1);
			line-height:60upx;
			// padding-bottom: 10upx;
		}
		.time{
			position: absolute;
			left:190upx;
			top: 0upx;
			>text{
				text-align: center;
				color: white;
				display: inline-block;
				width:38upx;
				line-height:38upx;
				background:#272A31;
				border-radius:4upx;
				margin: 10upx;
			}
		}
	}
	.like{
		margin-left: 17upx;
		width:141upx;
		height:33upx;
		font-size:40upx;
		font-family:59;
		font-weight:400;
		color:rgba(52,52,52,1);
		line-height:48upx;
	}
}
</style>
